<link rel="stylesheet" href="__JS__/fancybox/source/jquery.fancybox.css?v=2.1.4" type="text/css" media="screen" />
<script type="text/javascript" src="__JS__/fancybox/source/jquery.fancybox.pack.js?v=2.1.4"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox();
		
    });
</script>

<div class="product-content">
    <div class="category-img">
        <img src="{$category.thumb|getCategoryImage=###,false}" />
    </div>
    <include file="Public:breadcrumbs" />
    <div class="category-desc">
        <h3>{$category.category_name}</h3>
        <p>{$category.description}</p>
    </div>
    <div class="production">
        <volist name="rows" id="row" key="k" mod="2">
            <if condition="($k eq 0) or ($mod eq 0)">
                <ul class="thumbnails">
            </if>
            <li class="<if condition="($k eq 0) or ($mod eq 0)">first</if><if condition="($k eq $count) or ($mod eq 1)">last</if>">
            <a class="fancybox" rel="gallery1" href="{$row.thumb|getProductImage=###,FALSE}">
                <p>{$row.title}</p>
                <img src="{$row.thumb|getProductImage}" />
            </a>
            </li>
            <if condition="($k eq $count) or ($mod eq 1)">
                </ul>
            </if>
        </volist>
    </div>
    <div class="clear"></div>
    <div class="pages">{$page}</div>
</div>